<template>
  <v-chart :option="option" style="height: 400px;width: 500px;"></v-chart>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import Axios from 'axios';
import * as echarts from 'echarts';
import 'echarts-gl'
const option = ref({});
const datas = [
  { name: '翠屏区', value: 10 },
  { name: '屏山县', value: 20 },
  { name: '兴文县', value: 40 },
  { name: '珙县', value: 50 },
  { name: '筠连县', value: 60 },
  { name: '长宁县', value: 70 },
  { name: '江安县', value: 80 },
  { name: '南溪区', value: 90 },
  { name: '叙州区', value: 100 },
  { name: '高县', value: 30 },
]

const lineMaxHeight = () => {
  const maxValue = Math.max(...datas.map(item => item.value))
  return 0.1 / maxValue
}
// 柱状体的主干
const lineData = () => {
  return datas.map((item) => {
    return {
      coords: [a[item.name], [a[item.name][0], a[item.name][1] + item.value * lineMaxHeight()]]
    }
  })
}
// 柱状体的顶部
const scatterData = () => {
  return datas.map((item) => {
    // console.log(a[item.name][0], a[item.name][1] + item.value * lineMaxHeight(), 4455);

    return [a[item.name][0], a[item.name][1] + item.value * lineMaxHeight()]
  })
}
// 柱状体的底部
const scatterData2 = () => {
  return datas.map((item) => {
    return {
      name: item.name,
      value: a[item.name]
    }
  })

}
const a: any = {};
onMounted(async () => {
  const response = await Axios.get('https://geo.datav.aliyun.com/areas_v3/bound/511500_full.json');
  const mapData = response.data;
  echarts.registerMap('宜宾市', mapData); // 注册地图
  for (const obj of mapData.features) {
    const name = obj.properties.name;
    const center = obj.properties.center;
    a[name] = center;
  }

  console.log(a);

  option.value = {
    series: [
      // map
      {
        geoIndex: 0,
        // coordinateSystem: 'geo',
        showLegendSymbol: true,
        type: 'map',
        roam: true,
        label: {
          normal: {
            show: false,
            textStyle: {
              color: '#fff'
            }
          },
          emphasis: {
            show: false,
            textStyle: {
              color: '#fff'
            }
          }
        },

        itemStyle: {
          normal: {
            borderColor: '#2ab8ff',
            borderWidth: 1.5,
            areaColor: '#12235c'
          },
          emphasis: {
            areaColor: '#2AB8FF',
            borderWidth: 0,
            color: 'red'
          }
        },
        map: '宜宾市', // 使用
        data: datas
      },
      // 柱状体的主干
      {
        type: 'lines',
        zlevel: 5,
        effect: {
          show: false,
          // period: 4, //箭头指向速度，值越小速度越快
          // trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
          // symbol: 'arrow', //箭头图标
          // symbol: imgDatUrl,
          symbolSize: 5 // 图标大小
        },
        lineStyle: {
          width: 20, // 尾迹线条宽度
          color: 'rgb(22,255,255, .6)',
          opacity: 1, // 尾迹线条透明度
          curveness: 0 // 尾迹线条曲直度
        },
        label: {
          show: 0,
          position: 'end',
          formatter: '245'
        },
        silent: true,
        data: lineData()
      },
      // 柱状体的顶部
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        geoIndex: 0,
        zlevel: 5,
        label: {
          show: true,
          formatter: function (params: any) {
            return datas[params.dataIndex].value
          },
          position: "top"
        },
        symbol: 'circle',
        symbolSize: [20, 10],
        itemStyle: {
          color: 'rgb(22,255,255, 1)',
          opacity: 1
        },
        silent: true,
        data: scatterData()
      },
      // 柱状体的底部
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        geoIndex: 0,
        zlevel: 4,
        label: {
          // 这儿是处理的
          formatter: '{b}',
          position: 'bottom',
          color: '#fff',
          fontSize: 12,
          distance: 10,
          show: true
        },
        symbol: 'circle',
        symbolSize: [20, 10],
        itemStyle: {
          // color: '#F7AF21',
          color: 'rgb(22,255,255, 1)',
          opacity: 1
        },
        silent: true,
        data: scatterData2()
      },

    ],

    geo: [
      {
        map: '宜宾市',
        aspectScale: 0.9,//地图长宽比
        roam: false, // 是否允许缩放
        zoom: 1.2, // 默认显示级别
        layoutSize: '95%',//地图大小
        layoutCenter: ['54%', '50%'],//地图位置偏移

        itemStyle: {
          //正常样式
          normal: {
            opacity: 0.8,
            areaColor: 'rgb(17, 126, 120)',
            borderColor: 'rgb(56, 213, 202)',
            borderWidth: 1,
            shadowColor: 'rgb(0, 97, 90)',
            shadowOffsetY: -5,
          },
          //鼠标haver样式
          emphasis: {
            areaColor: 'rgb(4,68,64)'
          }
        },
        emphasis: {
          label: {
            show: false,
            color: '#fff'
          }
        },
        zlevel: 3//层级
      },
      {
        map: '宜宾市',
        aspectScale: 0.9,
        roam: false, // 是否允许缩放
        zoom: 1.2, // 默认显示级别
        layoutSize: '95%',
        layoutCenter: ['55%', '50%'],
        itemStyle: {
          normal: {
            borderColor: 'rgb(56, 202, 192)',
            borderWidth: 2,
            shadowColor: '#2C99F6',
            shadowOffsetY: 0,
            shadowBlur: 10,
            areaColor: 'rgb(56, 202, 192)'
          }
        },
        zlevel: 2,
        silent: true//图形是否不响应和触发鼠标事件
      },
      {
        map: '宜宾市',
        aspectScale: 0.9,
        roam: false, // 是否允许缩放
        zoom: 1.2, // 默认显示级别
        layoutSize: '95%',
        layoutCenter: ['55.5%', '51.5%'],
        itemStyle: {
          // areaColor: '#005DDC',
          areaColor: 'rgba(5, 130, 121,0.5)',
          borderColor: 'rgba(5, 130, 121,0.5)',
          borderWidth: 1
        },
        zlevel: 1,
        silent: true
      },

    ],
  };
});
</script>
